<template>
  <div v-if="filmInfo" style="background: #f4f4f4;width: 46.875rem;">
    <img :src="DatailImg" alt="" class="return" @click="Return">
    <!-- <datail-top v-if="isTopShow"> -->
    <datail-top v-scroll="30">
      {{ filmInfo.name }}
    </datail-top>
    <div class="filmimg">
      <img :src="filmInfo.poster" alt="剧片">
    </div>
    <div class="content">
      <h2>{{ filmInfo.name }}</h2>
      <div>{{ filmInfo.category }}</div>
      <div>{{ filmInfo.premiereAt | datafilter }} 上映</div>
      <div>{{ filmInfo.nation }} | {{ filmInfo.runtime }}分钟</div>
      <div style="line-height: 2.625rem;" :class="isHidden?'hidden':''">{{ filmInfo.synopsis }}</div>
      <div style="text-align: center;">
        <span class="iconfont" :class="isHidden?'icon-xiajiantouxi':'icon-shangjiantouxi'" @click="isHidden=!isHidden"></span>
      </div>
    </div>

    <!-- 演职人员 -->
    <div class="actors">
      <div>演职人员</div>
      <datail-swiper class="datailswiper" :number="3.5" name="actor" v-if="filmInfo.actors">
        <datail-swiper-item v-for="(actor,index) in filmInfo.actors" :key="index">
          <div class="actorImgbox">
            <img :src="actor.avatarAddress" alt="演员照片">
          </div>
          <div>{{ actor.name }}</div>
          <div>{{ actor.role }}</div>
        </datail-swiper-item>
      </datail-swiper>
      <div v-if="!filmInfo.actors" class="nullActor">
        暂无演职人员
      </div>
    </div>
    <!-- 剧照 -->
    <div class="photos">
      <div>剧照</div>
      <datail-swiper class="datailswiper" :number="2.3" name="photo">
        <datail-swiper-item v-for="(photo,index) in filmInfo.photos" :key="index">
          <div class="stillImgbox" @click="Preview(index)">
            <img :src="photo" alt="剧照">
          </div>
        </datail-swiper-item>
      </datail-swiper>
    </div>
    <div style="height: 10rem;"></div>
  </div>

</template>

<script>
import Vue from 'vue'
import moment from 'moment'
import http from '@/util/http'
import '@/assets/icon-datailtop/iconfont.css'
import DatailSwiper from '@/components/datails/DatailSwiper'
import DatailSwiperItem from '@/components/datails/DatailSwiperItem'
import DatailTop from '@/components/datails/DatailTop'
import DatailImg from '@/assets/fanhui.png'
import { ImagePreview } from 'vant'
import obj from '@/util/mixin0bj'

// 时间过滤器
Vue.filter('datafilter', (data) => {
  return moment(data * 1000).format('YYYY-MM-DD')
})

// 显示和隐藏导航栏 方法二 自定义指令
Vue.directive('scroll', {
  // 传入参数 el 当前的节点 binding 传过来的参数
  inserted (el, binding) {
    // console.log(binding.value);
    el.style.display = 'none'
    window.onscroll = () => {
      if (document.documentElement.scrollTop || document.body.scrollTop > binding.value) {
        el.style.display = 'block'
      } else {
        el.style.display = 'none'
      }
    }
  },
  // 销毁执行的命令
  unbind () {
    window.onscroll = null
  }
})
export default {
  mixins:[obj],
  data () {
    return {
      filmInfo: null,
      isHidden: true,
      isTopShow: false,
      DatailImg
    }
  },
  components: {
    DatailSwiper,
    DatailSwiperItem,
    DatailTop
  },
  mounted () {
    // 当前匹配的路由
    // console.log(this.$route.params.id)
    http({
      url: `/gateway?filmId=${this.$route.params.id}&k=3987413`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then(res => {
      this.filmInfo = res.data.data.film
      // console.log(res.data.data.film)
    })
  },
  methods: {
    Return () {
      this.$router.back() // 返回上一个页面
    },
    Preview (index) {
      ImagePreview({
        images: this.filmInfo.photos,
        closeable: true,
        startPosition: index,
        closeIconPosition: 'top-left'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.top{
  position: fixed;
  top: 0;
}
.return{
  width: 4rem;
  height: 4rem;
  position: fixed;
  top: .9375rem;
  left: .625rem;
  z-index: 200;
}
.filmimg{
  width: 100%;
  height: 26.25rem;
  overflow: hidden;
  img{
    width: 100%;
    position: relative;
    top: -70%;
  }
}
.content{
  background: #ffffff;
  color: #797d82;
  padding: 2rem;
  font-size: 2rem;
  h2{
    color: black;
  };
  div{
    margin-top: 1rem;
  };
  .iconfont{
  font-size: 12px;
}
}

.hidden{
  overflow: hidden;
  height: 5.375rem;
}

.actors{
  width: 100%;
  height: 21rem;
  box-sizing: border-box;
  background: #ffffff;
  margin-top: 1.5rem;
  padding: 1rem;
  overflow: hidden;
  .datailswiper{
    width: 100%;
    margin-top: 1rem;
    text-align: center;
    line-height: 2rem;
    font-size: 1rem;
    .actorImgbox{
      width: 10.625rem;
      height: 11rem;
      overflow: hidden;
      img{
        width: 100%;
        position: relative;
        top: -10%;
      }
    }
  }
}
.photos{
  height: 20rem;
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  margin-top: 1.5rem;
  padding: 1rem;

  .datailswiper{
    width: 100%;
    margin-top: 2rem;
    text-align: center;
    line-height: 2rem;
    font-size: 1rem;
    .stillImgbox{
      width: 18.75rem;
      height: 12.5rem;
      overflow: hidden;
      img{
        width: 100%;
      }
    }
  }
}
.nullActor{
  color: #797d82;
  height: 18.75rem;
  width: 100%;
  line-height: 18.75rem;
  text-align: center;
}
</style>
